<!--  -->
<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="User" name="first"><OldInfo></OldInfo></el-tab-pane>
    <el-tab-pane label="Config" name="second"><Health></Health></el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
 
  </el-tabs>
 

  <el-button @click="submit">提交</el-button>
  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted,toRaw,provide} from 'vue'
import  Health from '../components/Health.vue'
import  OldInfo from '../components/OldInfo.vue'
const activeName = ref('first')
 

const state=reactive({
               "name": "",
               "mobile": "",
               "photo": null,
               "gender": 0,
               "birthday": "",
               "nativePlace": "",
               "nation": "",
               "idCard": "",
               "politics": "",
               "socialCard": "",
               "marriage": null,
               "eduLevel": null,
               "education": null,
               "resident": null,
               "address": null,
               "begId": 1,
               "state": 2,
               "health":{"oldillness":"","nowillness":"","otherillness":"","otherCase":""},
               "selfCares":[],

               "checkups":[],


                "family":[]
           })

provide("data",state)


const submit=()=>{

  console.log(toRaw(state));
  

}
</script>
<style scoped>
:deep(.el-table){
  --el-fill-color-light: none;
}
</style>